<template>
    <div class="todolist-page">
        <div class="content">
            <addTodoList @setlist="addList"></addTodoList>
            <showTodoList :tlist="list" @setTodoList="getTodoList"></showTodoList>
            
            所有事件的数量：{{list.length}}
            已完成事件的数量：{{getFinishedNum}}
            未完成完成事件的数量：{{list.length - getFinishedNum}}
            <button @click="delItems()">删除已完成</button>
        </div>
        <button @click="getDataInfo">提交数据</button>
        {{$store.state}}
    </div>
</template>

<script>
    import addTodoList from './addlist.vue'
    import showTodoList from './showlist.vue'
    import {recycling} from '@/api/api.js'
    import {mapActions} from 'vuex'
    export default {
        name: 'todolist',
        components:{addTodoList,showTodoList},
        data() {
            return {
                inputText: '',
                list: []
            }
        },
        created(){
            this.getDataInfo()
        },
        computed: {
            // 已完成事件的数量
            getFinishedNum() {
                let num = 0
                this.list.forEach(item => {
                    if (item.check) {
                        num++
                    }
                })
                return num
            }
        },
        methods: {
            //引用vuex的公共方法
            ...mapActions(['setState']),
            
            //添加
            addList(val){
                if(val){
                    this.list.push(val)
                }
            },
            // 删除已完成
            delItems() {
                let tmp_todolist = [] //深拷贝
                this.list.forEach((item, index) => {
                    //把未完成的追加到临时数组里面
                    if (!item.check) {
                        tmp_todolist.push(item)
                    }
                })
                //把临时数组赋值给list
                this.list = [...tmp_todolist]
            },
            //获取list数据
            getTodoList(val){
                this.list = [...val]
            },
            
            getDataInfo(){
                // console.log(this.$store.getters.getState)
                // this.$store.state.msg='你好呀'
                // console.log(this.$store.state)
                console.log(this.$store.getters.getState)
                this.setState()
                // recycling({key:'2fad777c3592a1e88b11c070c83ba26b',imgurl:'https://www.baidu.com/img/flexible/logo/pc/result.png'}).then(res=>{
                //     console.log(res)
                // }).catch(err=>{
                //     console.log(err)
                // })
            },
            /*
            //XMLHttpRequest使用
            getDataInfo(){
                let xhr = new XMLHttpRequest()
                //使用open方法完成http请求
                //GET POST PUT DELETE
                xhr.open('GET','http://api.tianapi.com/txapi/worldtime/index?key=2fad777c3592a1e88b11c070c83ba26b&city=北京')
                //向服务器发送
                xhr.send(null)
                xhr.onreadystatechange = () => {
                    // xmr.readyState
                    // readyState
                    //     0.（未初始化）还没有调用send()方法
                    //     1.（载入）已经调用send()方法，正在发送请求
                    //     2.（载入完成）send()方法执行完成，已经接收到全部响应内容
                    //     3.（交互）正在解析响应内容
                    //     4.（完成）响应内容解析完成，可以在客户端调用
                    
                   if(xhr.readyState == 4){
                       //xhr.status http响应的状态码
                       if(xhr.status == 200){
                           let rus = JSON.parse(xhr.responseText)
                           if(rus.code == 200){
                               this.time = rus.newslist[0].strtime
                           }else{
                               window.alert(rus.msg)
                           }
                       }
                   }
                }
                
            }*/
        },
        
    }
</script>

<style lang="scss" scoped>
    
</style>
